// 实现使用函数调用xtx-message组件的逻辑
import Message from './index.vue'
import { createVNode, render } from 'vue'

// 准备dom容器
const div = document.createElement('div')
document.body.appendChild(div)
// 定时器标识
let timer = null

// 导出使用方法
export function message ({ type, text, time = 3000 }) {
  // 书写以函数形式调用组件的逻辑
  //   1. type text 将来会作为组件的props传入
  //      createVNode(Message, {type, text}) -> VNode对象
  //   2. 最终需要把Message组件显示到真实dom中  render(VNode(Message), body下的直接子元素节点中)
  //   3. 2秒之后消失  setTimeout
  //   render(null, div)
  // 根据组件创建虚拟节点
  const VNode = createVNode(Message, { type, text })
  render(VNode, div) // 把虚拟节点渲染DOM容器中
  clearTimeout(timer) // 保证当前只有一个timer存在
  timer = setTimeout(() => {
    render(null, div) // 移出DOM容器内容
  }, time)
  // 自定义几秒后隐藏
}
